<template>
  <div id="userArticle">
    <div class="left-box">
      <!-- 左边头部 -->
      <div class="left_head_box">
        <router-link to="/user/dynamic" class="head_btn_box_link"><div class="head_btn_box"><span class="head_btn_box_p" :style="selectLeftHeadBtn==1 ? selectStyle : none">收藏</span></div></router-link>
        <router-link to="/user/article" class="head_btn_box_link"><div class="head_btn_box"><span class="head_btn_box_p" :style="selectLeftHeadBtn==2 ? selectStyle : none">文章</span></div></router-link>
        <router-link to="/user/follow" class="head_btn_box_link"><div class="head_btn_box"><span class="head_btn_box_p" :style="selectLeftHeadBtn==3 ? selectStyle : none">回答</span></div></router-link>
        <div class="head_btn_box_link">
          <div class="title">更多</div>
          <div class="select-box">
            <div class="title-select-box">
              <router-link to="/user/topic" class="select-font">关注的话题</router-link>
            </div>
            <div class="title-select-box">
              <router-link to="/user/problem" class="select-font">关注的问题</router-link>
            </div>
            <div class="title-select-box">
              <router-link to="/user/topic" class="select-font">关注的收藏夹</router-link>
            </div>
            <div class="title-select-box">
              <router-link to="/user/topic" class="select-font">关注的专栏</router-link>
            </div>
          </div>
        </div>
        <!--<router-link to="/user/hotList" class="head_btn_box_link"><div class="head_btn_box"><span class="head_btn_box_p" :style="selectLeftHeadBtn==5 ? selectStyle : none">文章</span></div></router-link>-->
      </div>
      <div class="left-head-name"><strong>我的文章</strong></div>
      <div class="left_body_box">
        <UserArticleCard v-for="(i, index) of ArticleList" :key="index" :cardList="i"></UserArticleCard>
      </div>
      <!--<div class="article-card" v-for="(list,index) in list" :key="index">-->
      <!--<div class="card-list">-->
      <!--<div class="card-title"><strong>{{list.title}}</strong></div>-->
      <!--<div class="user-data">-->
      <!--<div class="data-photo"></div>-->
      <!--<div class="data-name"><strong>sss</strong></div>-->
      <!--</div>-->
      <!--<div class="card-article">-->
      <!--&lt;!&ndash;<div class="article-data-part" @click="open(index)" v-if="!isOpen">发生纷抠纷几纠纷抠脚啊几纠纷抠脚啊几纠纷抠脚啊几纠纷抠脚啊几纠纷抠脚啊几纠纷抠脚啊几纠纷抠脚啊几纠纷抠脚啊几纠纷抠脚啊几纠纷抠脚啊几纠纷抠脚啊几纠纷抠脚啊几纠纷抠脚啊几纠纷抠脚啊几纠纷抠脚啊几点生纠纷抠脚啊几点生纠纷抠脚啊几点生纠纷抠脚啊几点生纠纷抠脚啊几点放了</div>&ndash;&gt;-->
      <!--<div class="article-data-all">{{list.article}}</div>-->
      <!--</div>-->
      <!--<div class="card-under">{{list.time}} · {{list.number}}个评论</div>-->
      <!--</div>-->
      <!--</div>-->
    </div>
  </div>
</template>
<script>
  import UserArticleCard from './userCard/UserArticleCard'
  export default {
    name: 'userArticle',
    components: {
      'UserArticleCard': UserArticleCard
    },
    data () {
      return {
        list: [
          { 'id': 1, 'title': '母猪上树', 'content': '传说，有一只母猪，它心性骄傲，不甘沦为一头生殖工具，为此她努力锻炼，开始了它的爬树生涯！', 'isImage': true, 'imageUrl': '', 'goodNum': 99, 'isGood': false, 'badNum': 999, 'commentNum': 1567 }
          // {'id': 1, 'title' : '下赛季蔡徐坤能进入NBA吗','time':'2018-04-05','number':'123'},
          // {'title' : '下赛季蔡徐坤能进入','time':'2018-04-05','number':'122','article':'发生的水电费水电费是'},
          // {'title' : '下赛季蔡徐NBA吗','time':'2018-04-05','number':'121'}
        ],
        selectLeftHeadBtn: 2,
        ArticleList: [],
        selectStyle: {'color': '#0084ff'}
      }
    },
    computed: {
    },
    created () {
      this.axios.get('/api/getQuestionByUserId', {
        params: {
          phone: sessionStorage.getItem('phone')
        }
      })
        .then(res => {
          this.ArticleList = res.data.data
          console.log(res)
        })
    },
    methods: {

    }
  }
</script>
<style scoped>
  @import '../../../../../static/css/user/UserArticle.css';
</style>
